/*
  目标: 复用 逻辑 
  
  自定义hooks  来实现

  返回 鼠标的坐标
  
  小结: 
    1. 函数的命名  use+其他
    2. 可以在函数中 使用 react的hooks useState，useEffect 
    3. 这个自定义hooks 一定是 放在 函数组件中使用，而不是 自己 直接简单的调用！！
        这样才可以提现出  多个组件 复用 一段业务逻辑 
*/

import { useState, useEffect } from "react";

// useMouse(); // 错误的用法 因为普通函数的不能直接使用 useState
function useMouse() {
  const [point, setPoint] = useState({ x: 0, y: 0 });

  // 函数  给鼠标移动事件使用 实时获取到鼠标的位置
  const onMouseMove = (ev) => {
    setPoint({ x: ev.clientX, y: ev.clientY });
  };

  return [point, onMouseMove];
}

// useFullMouse  就在钩子里面获取到 鼠标的坐标
function useFullMouse() {
  const [point, setPoint] = useState({ x: 0, y: 0 });
  useEffect(() => {
    document.body.addEventListener("mousemove", function (ev) {
      setPoint({ x: ev.clientX, y: ev.clientY });
    });
  }, []);
  return point;
}

export default function App() {
  const point = useFullMouse();
  return (
    <div style={{ height: "100vh" }}>
      x:{point.x} y:{point.y}
    </div>
  );
}

// export default function App() {
//   // 复用 鼠标移动的 逻辑
//   const [point, onMove] = useMouse();

//   return (
//     <>
//       <div style={{ height: "100vh" }} onMouseMove={onMove}>
//         <h1>
//           x:{point.x} y:{point.y}
//         </h1>
//         <Main></Main>
//       </div>
//     </>
//   );
// }
// const Main = () => {
//   // 复用 鼠标移动的 逻辑
//   const [point, onMove] = useMouse();
//   return (
//     <div
//       onMouseMove={onMove}
//       style={{ height: "30vh", backgroundColor: "yellow" }}
//     >
//       <h2>
//         x:{point.x} y:{point.y}
//       </h2>
//     </div>
//   );
// };
